<template>
      <div class="login">
      <div>
        <img src="../../assets/img/logo.png">
        <p>山羊陪诊</p>
      </div>
      
      <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field 
            v-model="form.userName" 
            name="用户名" 
            label="用户名" 
            placeholder="用户名" 
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field 
            v-model="form.passWord" 
            type="password" 
            name="密码" 
            label="密码" 
            placeholder="密码" 
            :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;padding-top: 20px;">
            <van-button round block type="primary" native-type="submit">登录</van-button>
        </div>
    </van-form>
    </div>
</template>
<script setup>
import {reactive,getCurrentInstance} from 'vue'
import { useRouter} from 'vue-router'


const router = useRouter()
//获取当前vue实例
const { proxy } = getCurrentInstance()
//表单数据
const form = reactive({
    userName:'',
    passWord:'',
})
const onSubmit = async () =>{
    const {data} = await proxy.$api.login(form)
        if(data.code === 10000){
            localStorage.setItem('h5_token',data.data.token)
            localStorage.setItem('h5_userInfo',JSON.stringify(data.data.userInfo))
            router.push('/home')
            
        }
}
</script>
<style lang="less" scoped>
.login {
  padding-top: 70px;
  div{
    text-align: center;
    img{
      width: 100px;
      height: 100px;
      padding-bottom: 10px;
    }
    p{
      padding-bottom: 15px;
      color:#FA6205;
      font-weight: bold;
      font-family: a;
      font-size: 30px;
    }
  }
    
  
  .van-button--normal {
    // background-color: @bgColor;
    border: 0;
  }

  .link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    // text-decoration: underline;

  }

//   .message {
//     padding: 0 15px;
//     box-sizing: border-box;
//     margin-top: 20px;
//     font-size: 13px;
//     font-family: Arial, Helvetica, sans-serif;
//     font-weight: normal;
//     text-align: center;
//     color: #666;
//     line-height: 175%;

//     a {
//       color: #FA6205;
//     }

//     .van-checkbox {
//       display: inline-block !important;
      
//     }
//   }

// }
// .tishi{
// a{
//   span{
//     font-size: 18px;
//     font-family: a;
//     font-weight: bold;
//     text-decoration: underline;
//     color: #FA6205;
//   }
// }
}
</style>